<template>
  <view>
    <view class="goods-list">
      <uni-swipe-action>
        <block v-for="(item, i) in goods" :key="i">
          <uni-swipe-action-item :right-options="options" @click="swipeItemClickHandler(item)" :disabled="showSwipItem">
            <view class="goods-item" @click="gotoDetailHandle(item)">
              <!-- 左边盒子 -->
              <view class="goods-item-left">
                <label class="radio">
                  <radio :checked="item.goods_state" color="#c00000" v-if="showRadio"
                    @click="radioClickHandler(item)" />
                  <text></text>
                </label>
                <image :src="item.goods_small_logo || defaultPic" class="goods-pic"></image>
              </view>
              <!-- 右边盒子 -->
              <view class="goods-item-right">
                <text class="goods-name">{{item.goods_name}}</text>
                <view class="goods-info-box">
                  <text class="goods-price">￥{{item.goods_price | tofixed}}</text>
                  <uni-number-box :min="1" :value="item.goods_count" v-if="showNum"
                    @change="numChangeHandler($event, item)"></uni-number-box>
                </view>
              </view>
            </view>
          </uni-swipe-action-item>
        </block>
      </uni-swipe-action>
    </view>
  </view>
</template>

<script>
  export default {
    name: "my-goods",
    props: {
      // 商品的信息对象
      goods: {
        type: Array
      },
      showRadio: {
        type: Boolean,
        default: false
      },
      showNum: {
        type: Boolean,
        default: false
      },
      showSwipItem: {
        type: Boolean,
        default: false
      }
    },
    filters: {
      tofixed(number) {
        return Number(number).toFixed(2)
      }
    },
    data() {
      return {
        defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
        options: [{
          text: '删除', // 显示的文本内容
          style: {
            backgroundColor: '#C00000' // 按钮的背景颜色
          }
        }]
      };
    },
    methods: {
      gotoDetailHandle(item) {
        this.$emit('click', item)
      },
      radioClickHandler(item) {
        this.$emit('radio-change', {
          goods_id: item.goods_id,
          goods_state: !item.goods_state
        })
      },
      numChangeHandler(e, item) {
        this.$emit('num-change', {
          goods_id: item.goods_id,
          goods_count: +e
        })
      },
      swipeItemClickHandler(e) {
        this.$emit('swipe-Click', {
          goods_id: e.goods_id
        })
      }
    }
  }
</script>

<style lang="scss">
  .goods-list {
    .goods-item {
      display: flex;
      padding: 10px 5px;
      border-bottom: 1px solid #f0f0f0;

      .goods-item-left {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .goods-pic {
          width: 100px;
          height: 100px;
          display: block;
          margin-right: 5px;
        }
      }

      .goods-item-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;

        .goods-name {
          font-size: 13px;
        }

        .goods-info-box {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .goods-price {
            color: #c00000;
            font-size: 16px;
          }
        }
      }
    }
  }
</style>